// AppContent.js
import {Layout} from "antd";
import {Content} from "antd/es/layout/layout";
import {Route, Routes} from "react-router-dom";
import Menus from "../../configs/Menus";
import React, {useEffect, useRef} from "react";

const AppContent = ({collapsed}) => { // 接收折叠状态
    const canvasRef = useRef(null);

    useEffect(() => {
        // Canvas代码保持不变...
    }, []);

    // 计算内容宽度（根据折叠状态动态调整）
    const contentWidth = `calc(100vw - ${collapsed ? 80 : 190}px - 48px)`;

    return (
        <Layout style={{padding: "24px 24px 24px"}}>
            <Content
                style={{
                    padding: 24,
                    margin: 0,
                    background: "white",
                    borderRadius: "15px",
                    height: "calc(100vh - 112px)",
                    width: contentWidth, // 使用计算的宽度
                    overflowY: "auto",
                    overflowX: "auto",
                    position: "relative",
                }}
            >
                <canvas
                    ref={canvasRef}
                    style={{
                        position: "absolute",
                        top: 0,
                        left: 0,
                        width: "100%",
                        height: "100%",
                        pointerEvents: "none",
                        zIndex: 0,
                    }}
                />

                <div style={{position: "relative", zIndex: 1}}>
                    <Routes>
                        {Menus.map((item) => (
                            <Route
                                key={item.key}
                                path={item.key}
                                element={item.routeElement}
                            />
                        ))}
                    </Routes>
                </div>
            </Content>
        </Layout>
    );
};

export default AppContent;